<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        #Q-nav1 {
            overflow: hidden;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

    <!--引入工具js-->
    <script src="my.js"></script>
    <script>
        window.onload = function () {
            //需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
            //需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
            //步骤：
            //1.老三步。
            //2.判断 ，被卷曲的头部的大小
            //3.满足条件添加类，否则删除类


            //1.老三步。
//             var topDiv = document.getElementById("top");
//             var height = topDiv.offsetHeight;
//             var middle = document.getElementById("Q-nav1");
//             var main = document.getElementById("main");
// 
//             window.onscroll = function () {
//                 //2.判断 ，被卷曲的头部的大小
//                 if(scroll().top > height){
//                     //3.满足条件添加类，否则删除类
//                     middle.className += " fixed";
//                     //第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
//                     main.style.paddingTop = middle.offsetHeight+"px";
//                 }else{
//                     middle.className = "";
//                     //清零
//                     main.style.paddingTop = 0;
//                 }
//             }
			var topDiv= document.getElementById("top");
			var height = topDiv.offsetHeight;
			var middle = document.getElementById("Q-nav1");
			var main = document.getElementById("main");
			
			window.onscroll = function(){
				if(scroll().top > height){
					middle.className += " fixed";
					main.style.paddingTop = middle.offsetHeight+"px";
				}else{
					middle.className = "";
					main.style.paddingTop = 0;
				}
			}
        }
    </script>
</head>
<body>
    <div class="top" id="top">
        <img src="images/top.png" alt=""/>
    </div>
    <div id="Q-nav1">
        <img src="images/nav.png" alt=""/>
    </div>
    <div class="main" id="main">
        <img src="images/main.png" alt=""/>
    </div>
</body>
</html>
